<template>
  <div class="dashboard">
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon users">
              <i class="el-icon-user"></i>
            </div>
            <div class="stat-info">
              <div class="stat-value">12,345</div>
              <div class="stat-label">用户总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon orders">
              <i class="el-icon-document"></i>
            </div>
            <div class="stat-info">
              <div class="stat-value">1,234</div>
              <div class="stat-label">订单总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon revenue">
              <i class="el-icon-money"></i>
            </div>
            <div class="stat-info">
              <div class="stat-value">¥56,789</div>
              <div class="stat-label">总收入</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon growth">
              <i class="el-icon-data-line"></i>
            </div>
            <div class="stat-info">
              <div class="stat-value">+12.5%</div>
              <div class="stat-label">月增长率</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="charts-row">
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>用户增长趋势</span>
            </div>
          </template>
          <div ref="userChartRef" class="chart-container"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>收入统计</span>
            </div>
          </template>
          <div ref="revenueChartRef" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="recent-row">
      <el-col :span="12">
        <el-card class="recent-card">
          <template #header>
            <div class="card-header">
              <span>最新用户</span>
            </div>
          </template>
          <el-table :data="recentUsers" style="width: 100%">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="registerTime" label="注册时间" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="recent-card">
          <template #header>
            <div class="card-header">
              <span>最新订单</span>
            </div>
          </template>
          <el-table :data="recentOrders" style="width: 100%">
            <el-table-column prop="id" label="订单号" />
            <el-table-column prop="user" label="用户" />
            <el-table-column prop="amount" label="金额" />
            <el-table-column prop="status" label="状态" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 图表引用
const userChartRef = ref()
const revenueChartRef = ref()

// 最新用户数据
const recentUsers = ref([
  { id: 1, username: 'user1', email: 'user1@example.com', registerTime: '2023-01-01' },
  { id: 2, username: 'user2', email: 'user2@example.com', registerTime: '2023-01-02' },
  { id: 3, username: 'user3', email: 'user3@example.com', registerTime: '2023-01-03' },
  { id: 4, username: 'user4', email: 'user4@example.com', registerTime: '2023-01-04' },
  { id: 5, username: 'user5', email: 'user5@example.com', registerTime: '2023-01-05' }
])

// 最新订单数据
const recentOrders = ref([
  { id: 'ORD001', user: 'user1', amount: '¥199.00', status: '已完成' },
  { id: 'ORD002', user: 'user2', amount: '¥299.00', status: '已支付' },
  { id: 'ORD003', user: 'user3', amount: '¥99.00', status: '待发货' },
  { id: 'ORD004', user: 'user4', amount: '¥399.00', status: '已完成' },
  { id: 'ORD005', user: 'user5', amount: '¥199.00', status: '已取消' }
])

// 初始化用户增长趋势图表
const initUserChart = () => {
  if (!userChartRef.value) return
  
  const chart = echarts.init(userChartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110],
        type: 'line',
        smooth: true
      }
    ]
  }
  
  chart.setOption(option)
}

// 初始化收入统计图表
const initRevenueChart = () => {
  if (!revenueChartRef.value) return
  
  const chart = echarts.init(revenueChartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '收入来源',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: '产品A' },
          { value: 735, name: '产品B' },
          { value: 580, name: '产品C' },
          { value: 484, name: '产品D' },
          { value: 300, name: '产品E' }
        ]
      }
    ]
  }
  
  chart.setOption(option)
}

// 组件挂载后初始化图表
onMounted(() => {
  initUserChart()
  initRevenueChart()
})
</script>

<style lang="scss" scoped>
.dashboard {
  .stats-row {
    margin-bottom: 20px;
    
    .stat-card {
      .stat-content {
        display: flex;
        align-items: center;
        
        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20px;
          font-size: 24px;
          color: white;
          
          &.users {
            background-color: #409EFF;
          }
          
          &.orders {
            background-color: #67C23A;
          }
          
          &.revenue {
            background-color: #E6A23C;
          }
          
          &.growth {
            background-color: #F56C6C;
          }
        }
        
        .stat-info {
          .stat-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
          }
          
          .stat-label {
            color: #909399;
          }
        }
      }
    }
  }
  
  .charts-row {
    margin-bottom: 20px;
    
    .chart-card {
      .chart-container {
        height: 300px;
      }
    }
  }
  
  .recent-row {
    .recent-card {
      .el-table {
        margin-top: 20px;
      }
    }
  }
}
</style>